body {
  margin: 0px;
}

.ani1 {
  color: #ff0000;
  /* transition：过渡动画，参数一表示哪一个样式变化使用过渡效果，参数二，过渡时长 */
  transition: color 2s;
}

.ani1:hover {
  color: #00ff00;
}

.ani2 {
  border: 1px solid #ff0000;
  width: 15rem;
  text-align: center;
  transition: width 2s;
}

.ani2:hover {
  width: 20rem;
}

.ani3 {
  border: 1px solid #ff0000;
  width: 10rem;
  height: 5rem;
  /* 过渡动画要么针对单一样式，要么就是all全部 */
  transition: all 2s;
}

.ani3:hover {
  width: 15rem;
  height: 8rem;
}

.ani4 {
  border: 1px solid #ff0000;
  width: 10rem;
  height: 5rem;
}

.ani4:hover {
  animation: kf01 2s;
}

@keyframes kf01 {
  /* from */
  0% {
    width: 10rem;
    height: 5rem;
  }
  /* to */
  100% {
    width: 15rem;
    height: 8rem;
  }
}

.ani5 {
  border: 1px solid #ff0000;
  width: 10rem;
  height: 5rem;
}

.ani5:hover {
  /* 
    animation使用关键帧动画
    参数1是动画的名称 参数2是时长 
  */
  animation: kf02 2s;
}

/* 
@keyframes，定义关键帧动画
后面是动画的名称
*/
@keyframes kf02 {
  /*
  动画的进度百分比{
    时间到达时的元素样式
  } 
  */
  0% {
    width: 10rem;
    height: 5rem;
  }
  50% {
    width: 15rem;
    height: 5rem;
  }
  100% {
    width: 15rem;
    height: 8rem;
  }
}

.ani6 {
  animation: kf03 5s infinite;
}

@keyframes kf03 {
  0% {
    text-shadow: 0px 0px 0px #ff0000;
  }
  30% {
    font-size: 0.8rem;
  }
  50% {
    text-shadow: 0px 0px 10px #ff0000;
    font-size: 1.6rem;
  }
  80% {
    font-size: 1rem;
  }
  100% {
    text-shadow: 0px 0px 0px #ff0000;
  }
}
